<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    :title="dialogStatus === 'create' ? '新建记录组' : '更新记录组'"
    size="61%"
    :visible.sync="visibility"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-row>
        <el-form
          ref="dataForm"
          :model="temp"
          :rules="rules"
          label-position="right"
          label-width="120px"
          style="width: 100%"
        >
          <el-form-item label="模板组名" prop="recordTemplateGroupName">
            <el-input v-model.trim="temp.recordTemplateGroupName" />
          </el-form-item>
            <el-form-item label="显示顺序" prop="sequence">
          <el-col :span="6">
              <el-input v-model="temp.sequence" :input="isNumber" type="number" />
            </el-col>
            </el-form-item>
          <!-- <el-form-item label="是否显示">
            <el-checkbox v-model="temp.showWriteFlag" label="记录人" />
            <el-checkbox v-model="temp.showCheckFlag" label="审核人" />
          </el-form-item> -->
          <el-form-item label="备注">
            <el-input v-model="temp.memo" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="handleCommit">
              确 定
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </el-drawer>
</template>

<script>
import {
  saveRecordTemplateGroup,
  updateRecordTemplateGroup
} from '@/api/rs/recordTemplate'
import { isNumber } from '@/utils/validate.js'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    dialogStatus: {
      required: true,
      type: String
    },
    currentTemplateId: {
      type: String,
      default: null
    },
    currentGroup: {
      type: Object,
      default: null
    },
    updateData: {
      type: Function,
      default: () => {}
    },
    currentSequence: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      loading: false,
      temp: {
        showWriteFlag: true,
        showCheckFlag: true
      },
      rules: {
        recordTemplateGroupName: [
          { required: true, message: '模板组名称不可为空', trigger: 'blur' }
        ],
        sequence: [{ required: true, message: '序号不可为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        if (this.currentSequence) {
          this.temp.sequence = this.currentSequence + 1
        }
      }
    },
    currentGroup(value) {
      if (value) {
        this.temp = Object.assign({}, value)
      } else {
        this.temp = {}
      }
    }
  },
  methods: {
    isNumber,
    handleCommit() {
      this.loading = true
      if (this.dialogStatus === 'create') {
        this.temp.recordTemplateId = this.currentTemplateId
        saveRecordTemplateGroup(this.temp)
          .then((response) => {
            // this.$emit('save', this.temp)
            this.visibility = false
            this.$emit('update-data')
          })
          .finally(() => {
            this.loading = false
          })
      } else {
        this.loading = false
        updateRecordTemplateGroup(this.temp).then((res) => {
          this.visibility = false
          this.$emit('update-data')
        })
        //
      }
    }
  }
}
</script>

<style lang="scss">
</style>>
